<template>
  <div>
    <div
      class="banner-box flex-center bg-[url('~/assets/images/solution/meeting_banner.png')] bg-cover bg-no-repeat"
    >
      <div class="banner-con">
        <h1 class="banner-main-title">视频会议系统</h1>
        <p class="xl:w-[35vw] mt-10 banner-text">
          联筑达·智慧工地视频会议系统，支持实现远程语音视频会议，通过传输线路及多媒体设备（台式机、笔记本、iPad、手机等），将声音、影像及文件资料互传，实现即时互动沟通。
        </p>
      </div>
    </div>
    
    <div class="py-18">
      <div class="module-con">
        <h2 class="module-title">系统特点</h2>
        <div class="mt-10 flex flex-col md:flex-row">
          <img class="w-full md:w-[62%] mb-4 md:mb-0" src="../../assets/images/solution/meeting_intro_1.png" />
          <img alt="视频会议系统" class="flex-1 w-full md:w-0 md:ml-4" src="../../assets/images/solution/meeting_intro_2.png" />
        </div>
      </div>
    </div>

    <div class="pt-[70px] pb-20 bg-[#FBFBFB]">
      <div class="module-con">
        <h2 class="module-title">系统优势</h2>
        <div class="flex flex-wrap mt-10 justify-around">
          <div
            v-for="(item, ind) in traitList"
            :key="ind"
            class="w-[227px] h-[289px] mb-6 px-7 relative flex-center flex-col rounded-sm border border-[#EDF4FB] border-t-2 border-t-[#0099FF]"
          >
            <img
              alt="视频会议系统"
              class="inline-block w-[103px] h-[103px]"
              :src="
                require(`../../assets/images/solution/meeting_0${ind + 1}.png`)
              "
            />
            <div class="text-[#222] mt-[15px]">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="py-[90px]">
      <div class="module-con">
        <h2 class="module-title">硬件产品</h2>
        <div class="w-full mt-10">
          <product-meeting></product-meeting>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ProductMeeting from '../../components/ProductMeeting.vue'
export default {
  components: { ProductMeeting },
  data() {
    return {
      traitList: [
        {
          name: '高清流畅',
        },
        {
          name: '全球服务',
        },
        {
          name: '安全稳定',
        },
        {
          name: '高效协作',
        },
        {
          name: '打破局限',
        },
      ],
    }
  },
  head: {
    title: '视频会议系统-联合智为',
    meta: [
      {
        hid: 'index-keywords',
        name: 'keywords',
        content: '视频会议系统',
      },
      {
        hid: 'index-desc',
        name: 'description',
        content:
          '联筑达·智慧工地视频会议系统，支持实现远程语音视频会议，通过传输线路及多媒体设备（台式机、笔记本、iPad、手机等），将声音、影像及文件资料互传，实现即时互动沟通。',
      },
    ],
  },
}
</script>

<style scoped></style>
